<template>
  <div class="app-container">
    <div class="top">
      <div class="filter-container left">
        <DatePicker 
          v-model="DataTime" 
          type="month" 
          placeholder="时间筛选"
          @on-change="getAllList"
        ></DatePicker>
        <Select 
          clearable 
          filterable 
          placeholder="组别筛选"
          v-model="members">
          <Option 
            v-for="(item, index) in allGroupInfo.catenames" 
            :key="index" 
            :value="item">
            {{item}}
          </Option>
        </Select>
      </div>

      <!-- 分值展示 -->
      <div class="filter-container right">
        <div class="right-item">
          <p class="ItemName"></p>
          <p class="grade-item-title">本月部门KPI平均值</p>
          <div class="grade-item-count"><span>{{allGroupInfo.kpiAvg || 0}}</span>分</div>
        </div>
        <div class="right-item">
          <p class="ItemName">{{allGroupInfo.kpiMin_name || ''}}</p>
          <p class="grade-item-title">本月部门KPI最低值</p>
          <div class="grade-item-count"><span>{{allGroupInfo.kpiMin_score || 0}}</span>分</div>
        </div>
        <div class="right-item">
          <p class="ItemName">{{allGroupInfo.max_bread_name  || ''}}</p>
          <p class="grade-item-title">物料数量最多品牌</p>
          <div class="grade-item-count"><span>{{allGroupInfo.max_bread_count || 0}}</span>个</div>
        </div>
        <div class="right-item">
          <p class="ItemName"></p>
          <p class="grade-item-title">本月部门总物料数量</p>
          <div class="grade-item-count"><span>{{allGroupInfo.materialSum || 0}}</span>个</div>
        </div>
        <div class="right-item">
          <p class="ItemName">{{allGroupInfo.kpiMax_name || ''}}</p>
          <p class="grade-item-title">本月部门KPI最高值</p>
          <div class="grade-item-count"><span>{{allGroupInfo.kpiMax_score || 0}}</span>分</div>
        </div>
        <div class="right-item">
          <p class="ItemName">{{allGroupInfo.min_bread_name || ''}}</p>
          <p class="grade-item-title">物料数量最少品牌</p>
          <div class="grade-item-count"><span>{{allGroupInfo.min_bread_count || 0}}</span>个</div>
        </div>
      </div>
    </div>
    <div class="filter-container">
      <h2>组平均分值<span class="unit">（单位：分）</span></h2>
      <Bar :initData="groupAvg"></Bar>
    </div>
  </div>
</template>

<script>
import Bar from './components/bar.vue'
import {getDepartment, getDepartmentAvg } from '@/api/intraClass'
import format from "date-format";
export default {
  data() {
    return {
      members: '',
      DataTime: new Date(),
      allGroupInfo: {},
      // 设计组平均分值
      groupAvg: {}
    }
  },
  components: {
    Bar
  },
  mounted() {
    this.getAllList()
  },
  methods: {
    // 获取组别信息
    async getAllList() {
      const list = {}
      const Mount = new Date(this.DataTime || '').getMonth()
      const Year = new Date(this.DataTime || '').getFullYear()
      try {
        const { data = {}} = await getDepartment({
          startTime: format("yyyy-MM-dd", new Date(Year, Mount, 1)),
          endTime: format("yyyy-MM-dd", new Date(Year, Mount + 1, 0))
        })
        this.allGroupInfo = data
        data.cateAvg.forEach((item, index) => {
          list[data.catenames[index]] = item
        })
        this.groupAvg = list
      } catch(err) {
        return err
      }
    },
     // 获取组别平均值信息
    async getAllAvg() {
      const Mount = new Date(this.DataTime || '').getMonth()
      const Year = new Date(this.DataTime || '').getFullYear()
      try {
        const { data = {}} = await getDepartmentAvg({
          startTime: format("yyyy-MM-dd", new Date(Year, Mount, 1)),
          endTime: format("yyyy-MM-dd", new Date(Year, Mount + 1, 0)),
          categoryName: this.members
        })
        this.groupAvg = data
      } catch(err) {
        return err
      }
    },
  },
  computed: {
    requestData() {
      let {DataTime, members} = this
      return {DataTime, members}
    }
  },
  watch: {
    requestData: {
      handler(data) {
        const list = Object.values(data)
        const result = list.every(item => item)
        if(result) {
          this.getAllAvg()
        }
      },
      deep: true
    }
  }
}
</script>

<style lang="less" scoped>
.filter-container {
  border-radius: 8px;
  margin-bottom: 10px;
  background-color: #fff;
  padding: 15px;
}
.top {
  display: flex;
  .left {
    flex: 2;
    margin-right: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /deep/ .ivu-select-single .ivu-select-selection {
      border-radius: 20px;
      padding: 0 10px;
      width: 100%;
      margin-bottom: 60px;
    }
    /deep/ .ivu-input-with-suffix {
      border-radius: 20px;
      padding: 0 20px;
      // margin-bottom: 60px;
    }
  }
  .right {
    flex: 7;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    .right-item {
      width: 30%;
      // height: 100px;
      margin-top: 10px;
      border-radius: 10px;
      padding-top: 10px;
      .ItemName {
        height: 24px;
        color: #fff;
        font-size: 16px;
        text-align: center;
      }
      .grade-item-title {
        color: #fff;
        font-size: 12px;
        text-align: center;
        // margin-top: 10px;
      }
      .grade-item-count {
        text-align: center;
        font-size: 16px;
        color: #fff;
        >span {
          font-size: 38px;
          font-weight: 600;
        }
      }
    }
    .right-item:nth-child(1) {
      background-color: #d3245b;
    }
    .right-item:nth-child(2) {
      background-color: #e8635a;
    }
    .right-item:nth-child(3) {
      background-color: #bc3d8a;
    }
    .right-item:nth-child(4) {
      background-color: #348550;
    }
    .right-item:nth-child(5) {
      background-color: #1d6ec0;
    }
    .right-item:nth-child(6) {
      background-color: #7a3a90;
    }
  }
}
.unit {
  color: #999;
}
</style>